﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Easyui扩展库 Datagrid - 落阳 整理</title>
    <link href="http://www.easyui-extlib.com/Content/Site.css" rel="stylesheet" />
    <script src="http://www.easyui-extlib.com/Scripts/jquery/jquery-1.11.0.min.js"></script>
    <script src="http://www.easyui-extlib.com/Scripts/jquery-extensions/jquery.jdirk.js"></script>
    <link href="http://www.easyui-extlib.com/Scripts/jquery-easyui/jquery-easyui-1.4.3/themes/default/easyui.css" rel="stylesheet" />
    <link href="http://www.easyui-extlib.com/Scripts/jquery-easyui/jquery-easyui-1.4.3/themes/icon.css" rel="stylesheet" />
    <script src="http://www.easyui-extlib.com/Scripts/jquery-easyui/jquery-easyui-1.4.3/jquery.easyui.min.js"></script>
    <script src="http://www.easyui-extlib.com/Scripts/jquery-easyui/jquery-easyui-1.4.3/locale/easyui-lang-zh_CN.js"></script>

    <script src="http://www.easyui-extlib.com/Scripts/jquery-easyui-extensions/datagrid/jeasyui.extensions.datagrid.getDom.js"></script>
    <script src="http://www.easyui-extlib.com/Scripts/jquery-easyui-extensions/datagrid/jeasyui.extensions.datagrid.getColumnInfo.js"></script>
    <script src="http://www.easyui-extlib.com/Scripts/jquery-easyui-extensions/datagrid/jeasyui.extensions.datagrid.getRowData.js"></script>
    <script src="http://www.easyui-extlib.com/Scripts/jquery-easyui-extensions/datagrid/jeasyui.extensions.datagrid.tooltip.js"></script>
    <script>
        $(function () {
            var getFrozenColumns = function () {
                var result = [];

                var c1 = [];
                c1.push({ field: 'ID', title: '编号', width: 100 });
                c1.push({ field: 'AreaName', title: '地区', width: 150 });
                c1.push({
                    field: 'Sex', title: '性别', width: 90,
                    formatter: function (val, row) {
                        return val == "1" ? "男" : (val == "2" ? "女" : "未知");
                    }
                });

                result.push(c1);

                return result;
            };

            var getColumns = function () {
                var result = [];

                var normal00000 = [
                    {
                        field: 'Remark', title: '备注', width: 90,
                        tooltip: true //表示是否启用该列的 tooptip 效果，只有当 datagrid options 中rowTooltip为false时才有效
                    }
                ];
                result.push(normal00000);

                return result;
            };
            var options = {
                title: "把鼠标移动到“备注”列上，以tooltip的方式显示完整的备注内容",
                idField: "ID",
                rownumbers: false,
                fit: true,
                border: false,
                singleSelect: true,
                rowTooltip: false, //是否启用行数据的 tooltip 功能，若该属性为true，则设置在columns中的tooltip会自动失效
                frozenColumns: getFrozenColumns(),
                columns: getColumns(),
                method: "get",
                url: "datagrid-tooltip-data.json"
            };

            $("#dg1").datagrid(options);
        });
    </script>
</head>
<body>
    <div class="easyui-panel" data-options="fit:true,border:false">
        <table id="dg1"></table>
    </div>
</body>
</html>
